{% extends "scheduling/base.html" %}
{% load static %}

{% block content %}
<div class="container mt-4">
    <div class="card">
        <div class="card-header bg-primary text-white">
            <h3 class="mb-0">
                <i class="fas fa-user-plus me-2"></i>添加新司机
            </h3>
        </div>
        <div class="card-body">
            <form method="post" class="needs-validation" novalidate>
                {% csrf_token %}
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="id_driver_id" class="form-label">工号</label>
                        {{ form.driver_id }}
                        <div class="invalid-feedback">
                            请输入有效的工号
                        </div>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="id_name" class="form-label">姓名</label>
                        {{ form.name }}
                        <div class="invalid-feedback">
                            请输入姓名
                        </div>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">驾照类型</label>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="license" id="license_a1" value="A1" required>
                            <label class="form-check-label" for="license_a1">A1 驾照</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="license" id="license_a3" value="A3" required>
                            <label class="form-check-label" for="license_a3">A3 驾照</label>
                        </div>
                        <div class="invalid-feedback">
                            请选择驾照类型
                        </div>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label">状态</label>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="status" id="status_on_duty" value="on_duty" checked required>
                            <label class="form-check-label" for="status_on_duty">在岗</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="status" id="status_off_duty" value="off_duty" required>
                            <label class="form-check-label" for="status_off_duty">休假</label>
                        </div>
                        <div class="invalid-feedback">
                            请选择司机状态
                        </div>
                    </div>
                </div>
                
                <div class="d-flex justify-content-end mt-4">
                    <button type="submit" class="btn btn-success me-2">
                        <i class="fas fa-save me-2"></i>保存司机
                    </button>
                    <a href="{% url 'driver_list' %}" class="btn btn-secondary">
                        <i class="fas fa-times me-2"></i>取消
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
// 表单验证
(function () {
  'use strict'

  var forms = document.querySelectorAll('.needs-validation')

  Array.prototype.slice.call(forms)
    .forEach(function (form) {
      form.addEventListener('submit', function (event) {
        if (!form.checkValidity()) {
          event.preventDefault()
          event.stopPropagation()
        }

        form.classList.add('was-validated')
      }, false)
    })
})()
</script>
{% endblock %}